/*
  学习目标：封装组件-Icon, 支持onClick事件以及剩余属性
  1. 支持onClick
    1.1 IconPorps扩展了onClick
    1.2 给svg标签设置onClick事件，绑定props.onClick
  2. 支持剩余属性
  */

import React from 'react';
import classNames from 'classnames';

type IconProps = {
  type: IconType;
  className?: string;
  onClick?: () => void;
  // 索引类型
  //  2.1 扩展IconProps支持索引类型，表示接收任意的props属性
  [key: string]: any;
};

export default function Icon(props: IconProps) {
  const { type, className, onClick, ...restProps } = props;

  return (
    <svg
      className={classNames('icon', className)}
      aria-hidden="true"
      onClick={onClick}
      // 2.2 将剩余属性，传给svg标签的props
      {...restProps}
    >
      {/* 💥 #要留着  className xlinkHref要转成React的写法*/}
      <use xlinkHref={`#${type}`}></use>
    </svg>
  );
}

type IconType =
  | 'iconphoto-fail'
  | 'iconphoto'
  | 'iconbtn_right'
  | 'iconicon_unenjoy1'
  | 'iconicon_feedback1'
  | 'iconicon_upload'
  | 'iconbianji'
  | 'icongengduo'
  | 'iconfanhui'
  | 'iconbtn_history1'
  | 'iconbtn_readingtime'
  | 'iconbtn_like2'
  | 'iconbtn_pic'
  | 'iconbtn_mine'
  | 'iconbtn_channel'
  | 'iconbtn_channel_close'
  | 'iconbtn_comment'
  | 'iconbtn_home_sel'
  | 'iconbtn_collect_sel'
  | 'iconbtn_mine_sel'
  | 'iconbtn_collect'
  | 'iconbtn_qa_sel'
  | 'iconbtn_like_sel'
  | 'iconbtn_feedback'
  | 'iconbtn_del'
  | 'iconbtn_tag_close'
  | 'iconbtn_essay_close'
  | 'iconbtn_qa'
  | 'iconbtn_myworks'
  | 'iconicon_blacklist'
  | 'iconbtn_mycollect'
  | 'iconbtn_video_sel'
  | 'iconbtn_share'
  | 'iconbtn_mymessages'
  | 'iconbtn_search'
  | 'iconbtn_like'
  | 'iconbtn_xiaozhitongxue'
  | 'iconbtn_video'
  | 'iconbtn_home';
